<template>
  <div class="user_skills">
    <el-table
      :data="alertInfos"
      :show-header="false"
      style="width: 100%; height: 50%"
      :fit="false"
    >
      <el-table-column
        prop="alertTypeName"
        label="报警类型"
        width="80"
        align="center"
      >
        <template slot-scope="scope">
          <span style="color: #e6a23c">{{ scope.row.alertTypeName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="content"
        label="报警详情"
        align="center"
        min-width="250"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="occurTime"
        label="时间"
        width="190"
        align="center"
      />
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: ['alertInfos'],
  mounted() {},

  methods: {},
}
</script>

<style lang="less" scoped>
.user_skills {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .el-table {
    color: rgba(255, 255, 255, 0.8) !important;
  }
  :deep(th) {
    color: white !important;
    background-color: rgba(0, 0, 0, 0);
  }
}
:deep(.el-table tbody tr:hover > td) {
  color: white !important;
  background: #171f34 !important;
  border-bottom: 1px solid rgb(255, 255, 255);
}
.user_skills :deep(.el-table),
.user_skills :deep(.el-table tr) {
  background-color: transparent !important;
}
.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
</style>
